<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="./bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css">
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.1.1/jquery.min.js"></script>
    <script src="./bootstrap/js/bootstrap.js" type="text/javascript"></script>


    <script>
        function subInfo() {
            let inputgname = document.getElementById("inputgname").value;
            let inputgprice = document.getElementById("inputgprice").value;
            let inputgnum = document.getElementById("inputgnum").value;
            let inputgintro = document.getElementById("inputgintro").value;
            let myimg = document.getElementById("myimg").src;

            let obj = {gname: inputgname, gprice: inputgprice, gnum: inputgnum, gintro: inputgintro, gimg: myimg}

            $.ajax({
                url: 'merchant/g',
                type: 'post',
                dataType: 'json',
                contentType: 'application/json',
                data: JSON.stringify(obj),
                success: function (res) {
                    if (res.code == 200) {
                        document.getElementById("tipShow").innerHTML = '商品添加成功'
                    } else {
                        document.getElementById("tipShow").innerHTML = '商品添加失败,请重试'
                    }
                },
                complete: function (res) {
                    console.log('res', res)
                }
            });
        }
    </script>

</head>
<body>
<div style="height: 50px">
    <span id="tipShow" style="color:red"></span>
</div>


<form class="form-horizontal">
    <div class="form-group">
        <label for="inputgname" class="col-sm-2 control-label">商品名称</label>
        <div class="col-sm-8">
            <input type="text" class="form-control" id="inputgname" placeholder="请输入商品名称">
        </div>
    </div>
    <div class="form-group">
        <label for="inputgprice" class="col-sm-2 control-label">商品价格</label>
        <div class="col-sm-8">
            <input type="text" class="form-control" id="inputgprice" placeholder="请输入商品价格">
        </div>
    </div>
    <div class="form-group">
        <label for="inputgnum" class="col-sm-2 control-label">商品数量</label>
        <div class="col-sm-8">
            <input type="text" class="form-control" id="inputgnum" placeholder="请输入商品数量">
        </div>
    </div>
    <div class="form-group">
        <label for="inputgintro" class="col-sm-2 control-label">商品介绍</label>
        <div class="col-sm-8">
            <input type="text" class="form-control" id="inputgintro" placeholder="请输入商家地址">
        </div>
    </div>

    <div class="form-group">
        <label for="file" class="col-sm-2 control-label">商品图片</label>
        <div class="col-sm-8">
            <input type="file" id="file" onchange="uploadImg()">
        </div>
        <img src="" id="myimg" style="width: 150px;">
    </div>
</form>
<button class="btn btn-success" onclick="subInfo()" type="button">提交</button>
</body>
</html>

<script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.1.min.js"></script>
<script>
    // region:oss-cn-beijing
    // AK:LTAI5t7xABq7BeK5xJDvr7JZ
    // SK:A9V0ipvYPrn08p0lTeUwXDZYEDThjd
    // bucket:bigdata2cv2
    function uploadImg() {
        const client = new OSS({
            region: "oss-cn-beijing",
            accessKeyId: "LTAI5t7xABq7BeK5xJDvr7JZ",
            accessKeySecret: "A9V0ipvYPrn08p0lTeUwXDZYEDThjd",
            bucket: "bigdata2cv2",
        });
        const data = file.files[0];
        putObject(data);
        async function putObject(data) {
            try {
                const options = {
                    meta: {
                        temp: "demo"
                    },
                    mime: "json",
                    headers: {
                        "Content-Type": "text/plain"
                    },
                };
                let uploadFile = document.getElementById("file").value
                const result = await client.put(uploadFile, data, options);
                // console.log(result);
                // 获取上传过后的结果
                imgUrl = result.url;
                document.getElementById("myimg").src = result.url
            } catch (e) {
                console.log(e);
            }
        }
    }
</script>